<template>
	<view class="mainbgc mainpadding" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'采购单详情',liner:false}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content flexleft" @click="startPrint(28)">
					<image class="img" src="../../../static/image/system/my2.png" mode=""></image>
				</view>
			</view>
		</header-top>
		<!-- 代发货人 -->
		<view class="mainpadding ffffff radius">
			<view class="flexbetween">
				<view class="bigtext">{{dataAll.order_no}}</view>
				<view class="daifahuo" v-show="dataAll.status==10">待审核</view>
				<view class="yisongda" v-show="dataAll.status==20">待入库</view>
				<view class="yisongda" v-show="dataAll.status==30">已完成</view>
				<view class="jujue" v-show="dataAll.status==40">已作废</view>
				<view class="jujue" v-show="dataAll.status==50">已拒绝</view>
			</view>
			<view class="dingdan flexleft margin_top" @click="phone(dataAll.staff.mobile)">
				经办人：{{dataAll.staff.username}}
				<view class="dizhiimg"></view>
			</view>
		</view>
		<!-- 地址信息 -->
		<view class="mainpadding ffffff margin_top radius flexbetween">
			<view class="">
				<view class="flexbetween">
					<view class="bigtext">{{dataAll.supplier.name}}</view>
					<view class="bigtext normaltxt">{{dataAll.supplier.mobile}}</view>
				</view>
				<view class="flexbetween biankuang">
					<view class="dizhi flexleft">
						<view class="xiankuan">
							地址：{{dataAll.supplier.pq_cityinfo}}{{dataAll.supplier.address}}
						</view>
						<view class="juli">{{httpRequest.returnKmUnit(Number(dataAll.distance))}}</view>
					</view>
				</view>
				<view class="flexleft margin_top">
					<view class="lansetext margin_right">
						欠款：<text class="xiaohong">{{dataAll.supplier.qk_money}}</text>
					</view>
					<view class="lansetext">
						预收款：<text class="xiaolv">{{dataAll.supplier.yfk_money}}</text>
					</view>
				</view>
			</view>
			<view class="flexright">
				<view class="addressicon" style="margin-right: 20rpx;width: 80rpx;height: 80rpx;" @click="openmap()">
				</view>
				<view class="phoneicon" style="width: 80rpx;height: 80rpx;" @click="phone(dataAll.supplier.mobile)">
				</view>
			</view>
		</view>
		<!-- 商品名称 -->
		<view class="mainpadding ffffff radius margin_top">
			<view class="header flexbetween">
				<view class="headerchild" style="flex: 1;">商品名称</view>
				<view class="headerchild headercenter" style="flex: 1;">规格</view>
				<view class="headerchild headercenter" style="flex: 0.7;">数量</view>
				<view class="headerchild headerright" style="flex: 0.7;">单价</view>
			</view>
			<view class="content">
				<view class="content_child " v-for="item in dataAll.ordergoods" :key="item.id">
					<view class="flexbetween">
						<view class="huisetext" style="flex: 1;">{{item.goods_info.name}}</view>
						<view class="huisetext headercenter" style="flex: 1;" v-show="item.difference_type==1">
							{{item.goods_info.biggoodsunit.name}}
						</view>
						<view class="huisetext headercenter" style="flex: 1;" v-show="item.difference_type==2">
							{{item.goods_info.middlegoodsunit.name}}
						</view>
						<view class="huisetext headercenter" style="flex: 1;" v-show="item.difference_type==3">
							{{item.goods_info.smallgoodsunit.name}}
						</view>
						<view class="huisetext headercenter" style="flex: 0.7;">*{{item.num}}</view>
						<view class="huisetext headerright" style="flex: 0.7;">￥{{item.price}}</view>
					</view>
					<view class="flexbetween margin_topx">
						<view class="huisetext">备注：{{item.notes}}</view>
					</view>
				</view>
			</view>
			<view class="header flexbetween">
				<view class="headerbottom">合计：</view>
				<view class="headerbottom headercenter">{{dataAll.goods_zl_num}}种({{dataAll.goods_num}}件)</view>
				<view class="headerbottom headerright" style="color:#0BCB41">{{dataAll.total_goods_price}}元</view>
			</view>
		</view>
		<!-- 订单信息 -->
		<view class="mainpadding ffffff radius margin_top">
			<view class="dingdan shanpin">订单号：
				<text class="erbaxs">{{dataAll.order_no}}</text>
			</view>
			<view class="dingdan shanpin margin_top">配送方式：
				<text class="erbaxs">{{dataAll.ps_type==1?"自提":"送货"}}</text>
			</view>
			<view class="dingdan shanpin margin_top">是否开具发票：
				<text class="erbaxs">{{dataAll.kjfp_type==1?"是":"否"}}</text>
			</view>
			<view class="dingdan shanpin margin_top" v-show="dataAll.ps_type==2">运费：
				<text class="erbaxs">{{dataAll.yf_price}}</text>
			</view>
			<view class="dingdan shanpin margin_top">优惠金额：
				<text class="erbaxs" style="color: #0BCB41;">￥{{dataAll.discount_price}}</text>
			</view>
			<view class="dingdan shanpin margin_top">订单金额：
				<text class="erbaxs" style="color: #0BCB41;">￥{{dataAll.total_goods_price}}</text>
			</view>
			<view class="dingdan shanpin margin_top">商品数量：
				<text class="erbaxs">{{dataAll.goods_num}}</text>
			</view>
			<view class="dingdan shanpin margin_top">商品种类：
				<text class="erbaxs">{{dataAll.goods_zl_num}}</text>
			</view>
			<view class="dingdan shanpin margin_top">备注：
				<text class="erbaxs">{{dataAll.notes}}</text>
			</view>
			<view class="dingdan shanpin margin_top">下单时间：
				<text class="erbaxs">{{dataAll.createtime_text}}</text>
			</view>
		</view>
		<moDal :message="{modalShow:modal.modalShow,title:modal.title}" @modalSure="modalSure"></moDal><!-- 模态框 -->
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	const tsc = require("@/util/ble/tsc.js");
	const esc = require("@/util/ble/esc.js");
	const encode = require("@/util/ble/encoding.js");
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				listid: "",
				dataAll: {},
				lat: "35.17466",
				lng: "109.67307",
				httpRequest,
				pageShow: false,
				// 模态框
				modal: {
					modalShow: false,
					title: "",
				},
				// 打印机技术参数
				sendContent: "../../../static/image/news/boy.png",
				looptime: 0,
				currentTime: 1,
				lastData: 0,
				oneTimeData: 0,
				returnResult: "",
				canvasWidth: 180,
				canvasHeight: 180,
				imageSrc: '../../static/img/abc_ic_star_black_16dp.png',
				buffSize: [],
				buffIndex: 0,
				printNum: [],
				printNumIndex: 0,
				printerNum: 1,
				currentPrint: 1,
				isReceiptSend: false,
				isLabelSend: false,
				// 打印机技术结束
				
			}
		},
		onLoad(options) {
			this.listid = options.id
			// 打印机
			let that = this;
			let {
				BLEInformation
			} = that.Bluetooth;
			// 打印机结束
		},
		// 打印机开始
		computed: mapState(['sysinfo', 'Bluetooth']),
		onReady() {
			let list = []
			let numList = []
			let j = 0
			for (let i = 20; i < 200; i += 10) {
				list[j] = i;
				j++
			}
			for (let i = 1; i < 10; i++) {
				numList[i - 1] = i
			}
			this.buffSize = list;
			this.oneTimeData = list[0];
			this.printNum = numList;
			this.printerNum = numList[0];
		},
		onUnload() {
			let that = this;
			let {
				BLEInformation
			} = that.Bluetooth;
		},
		// 打印机结束
		onShow() {
			// #ifdef APP-PLUS
			this.getlocation()
			// #endif
			// #ifdef MP-WEIXIN || H5
			this.init()
			// #endif
			// 打印机开始
			let that = this;
			let width;
			let height;
			uni.getImageInfo({
				src: that.imageSrc,
				success(res) {
					console.log(res.width)
					console.log(res.height)
					width = res.width
					height = res.height
					that.canvasWidth = res.width;
					that.canvasHeight = res.height;
				}
			})
			const ctx = uni.createCanvasContext("edit_area_canvas", this);
			ctx.drawImage(this.imageSrc, 0, 0, width, height);
			ctx.draw();
			// 打印机结束
		},
		methods: {
			// 打印机开始
			receiptTest() {
				// this.selectshow = false
				var that = this;
				var canvasWidth = that.canvasWidth
				var canvasHeight = that.canvasHeight
				var command = esc.jpPrinter.createNew()
				command.init()
				// 标题
				command.bold(1); //加粗
				command.setFontSize(16); //字体大小
				command.setSelectJustification(1) //居中0左对齐1居中对齐2右对齐
				command.rowSpace(100);
				command.setText("采购单");
				command.setPrint();
				command.rowSpace(60); //行间距
				command.bold(0); //取消加粗
				command.setFontSize(0); //正常字体
				// 内容
				command.bold(0); //加粗
				command.setSelectJustification(0) //居中0左对齐1居中对齐2右对齐
				command.setText("订单时间：" + that.dataAll.createtime_text);
				command.setPrint();
				command.setText("供应商：" + that.dataAll.supplier.name + "  仓库：" + that.dataAll.warehouse.name);
				command.setPrint();
				command.setText("经办人：" + that.dataAll.staff.username + "  配送方式："+(that.dataAll.ps_type==1?"自提":"配送"));
				command.setPrint();
				command.setText("商品总金额：" + that.dataAll.total_goods_price+"  使用预付款："+that.dataAll.use_yfk_price);
				command.setPrint();
				command.setText("支付金额：" + that.dataAll.pay_price+"  运费："+that.dataAll.yf_price);
				command.setPrint();
				command.setText("优惠金额：" + that.dataAll.discount_price+"  未付金额："+that.dataAll.arrears_price);
				command.setPrint();
				// 表格
				command.rowSpace(80); //间距
				command.bold(5); //加粗
				command.setText("商品名称");
				command.setAbsolutePrintPosition(270);
				command.setText("单价");
				command.setAbsolutePrintPosition(380);
				command.setText("数量");
				command.setAbsolutePrintPosition(480)
				command.setText("金额");
				command.setPrint()
				command.bold(0); //加粗
				that.dataAll.ordergoods.forEach(item=>{
					command.setText(item.goods_info.name);
					command.setAbsolutePrintPosition(270);
					command.setText(item.price);
					command.setAbsolutePrintPosition(380);
					command.setText(item.num);
					command.setAbsolutePrintPosition(480);
					command.setText(Number(item.total_price));
					command.setPrint()
					if(item.difference_type==1){
						command.setText(item.goods_info.biggoodsunit.name);
					}else if(item.difference_type==2){
						command.setText(item.goods_info.middlegoodsunit.name);
					}else{
						command.setText(item.goods_info.smallgoodsunit.name);
					}
					command.setPrint()
				})
				command.bold(5); //加粗
				command.setText("品种：" + that.dataAll.goods_zl_num+"  数量："+that.dataAll.goods_num);
				command.setPrint()
				command.setText("合计："+that.dataAll.total_goods_price);
				command.setPrint()
				command.setText("订单备注："+that.dataAll.notes);
				command.setPrint()
				command.setText("签字：");
				command.setPrint()
				//时间
				// command.setSelectJustification(0); //居左
				// command.setText("时间：2019-11-11 12:10:30");
				// command.setPrint();
				// //编号
				// command.setSelectJustification(0); //居左
				// command.setText("编号：SD10000000000000000");
				// command.setPrintAndFeed(80); //打印并走纸feed个单位
				// //列表
				// command.rowSpace(80); //间距
				// command.bold(5); //加粗
				// command.setText("货号");
				// command.setAbsolutePrintPosition(100);
				// command.setText("颜色");
				// command.setAbsolutePrintPosition(180);
				// command.setText("尺码");
				// command.setAbsolutePrintPosition(270);
				// command.setText("单价");
				// command.setAbsolutePrintPosition(380);
				// command.setText("数量");
				// command.setAbsolutePrintPosition(480);
				// command.setText("金额");
				// command.setPrint()
				// command.bold(0); //加粗
				// // -------1
				// command.setText("86001W");
				// command.setAbsolutePrintPosition(100);
				// command.setText("黄色");
				// command.setAbsolutePrintPosition(180);
				// command.setText("均码");
				// command.setAbsolutePrintPosition(270);
				// command.setText("16947.92");
				// command.setAbsolutePrintPosition(390);
				// command.setText("1");
				// command.setAbsolutePrintPosition(480);
				// command.setText("19647.92");
				// command.setPrint()
				// // ------2
				// command.setText("86001W");
				// command.setAbsolutePrintPosition(100);
				// command.setText("黄色");
				// command.setAbsolutePrintPosition(180);
				// command.setText("均码");
				// command.setAbsolutePrintPosition(270);
				// command.setText("16947.92");
				// command.setAbsolutePrintPosition(390);
				// command.setText("1");
				// command.setAbsolutePrintPosition(480);
				// command.setText("19647.92");
				// command.setPrint()
				// // -------3
				// command.setText("86001W");
				// command.setAbsolutePrintPosition(100);
				// command.setText("黄色");
				// command.setAbsolutePrintPosition(180);
				// command.setText("均码");
				// command.setAbsolutePrintPosition(270);
				// command.setText("16947.92");
				// command.setAbsolutePrintPosition(390);
				// command.setText("1");
				// command.setAbsolutePrintPosition(480);
				// command.setText("19647.92");
				// command.setPrint();
				// //合计
				// command.bold(5); //加粗
				// command.setAbsolutePrintPosition(120);
				// command.setText("总数：10");
				// command.setAbsolutePrintPosition(320);
				// command.setText("合计：10000");
				// command.setPrint();
				// command.setAbsolutePrintPosition(120);
				// command.setText("实收：10000");
				// command.setAbsolutePrintPosition(320);
				// command.setText("找零：0");
				// command.setPrint();
				// // 收银员
				// command.rowSpace(120); //间距
				// command.setAbsolutePrintPosition(120);
				// command.setText("店员：何丹");
				// command.setAbsolutePrintPosition(320);
				// command.setText("会员：1000000000");
				// command.setPrint()

				// //提示
				// command.rowSpace(80); //间距
				// command.bold(2); //加粗
				// command.setSelectJustification(1); //居中
				// command.setText("售出商品购买后7天内,可凭小票退换");
				// command.setPrint();
				// command.setText("(注：吊牌未拆剪,商品未洗涤)");
				// command.setPrint();

				// //电话
				// command.setSelectJustification(0); //居左
				// command.setText("客服电话:(0571)86011123");
				// command.setPrint();
				// command.setText("联系地址:浙江省诸暨市暨阳街道健康路1-1号");
				// command.setPrint();
				command.setSelectJustification(1) //居中0左对齐1居中对齐2右对齐
				command.setText("询博技术支持");
				command.setPrintAndFeedRow(3);
				that.isReceiptSend = true;
				that.prepareSend(command.getData());


			},

			//准备发送，根据每次发送字节数来处理分包数量
			prepareSend(buff) {
				console.log(buff);
				let that = this
				let time = that.oneTimeData
				let looptime = parseInt(buff.length / time);
				let lastData = parseInt(buff.length % time);
				console.log(looptime + "---" + lastData)
				this.looptime = looptime + 1;
				this.lastData = lastData;
				this.currentTime = 1;
				that.Send(buff)
			},
			//分包发送
			Send(buff) {
				let that = this
				let {
					currentTime,
					looptime: loopTime,
					lastData,
					oneTimeData: onTimeData,
					printerNum: printNum,
					currentPrint
				} = that;
				let buf;
				let dataView;
				if (currentTime < loopTime) {
					buf = new ArrayBuffer(onTimeData)
					dataView = new DataView(buf)
					for (var i = 0; i < onTimeData; ++i) {
						dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
					}
				} else {
					buf = new ArrayBuffer(lastData)
					dataView = new DataView(buf)
					for (var i = 0; i < lastData; ++i) {
						dataView.setUint8(i, buff[(currentTime - 1) * onTimeData + i])
					}
				}
				console.log("第" + currentTime + "次发送数据大小为：" + buf.byteLength)
				let {
					BLEInformation
				} = that.Bluetooth;

				plus.bluetooth.writeBLECharacteristicValue({
					deviceId: BLEInformation.deviceId,
					serviceId: BLEInformation.writeServiceId,
					characteristicId: BLEInformation.writeCharaterId,
					value: buf,
					success: function(res) {
						console.log(res)
					},
					fail: function(e) {
						console.log(e)
					},
					complete: function() {
						currentTime++
						if (currentTime <= loopTime) {
							that.currentTime = currentTime;
							that.Send(buff)
						} else {
							//  uni.showToast({
							// title: '已打印第' + currentPrint + '张',
							//  })
							if (currentPrint == printNum) {
								that.looptime = 0;
								that.lastData = 0;
								that.currentTime = 1;
								that.isReceiptSend = false;
								that.isLabelSend = false;
								that.currentPrint = 1;
							} else {
								currentPrint++;
								that.currentPrint = currentPrint;
								that.currentTime = 1;
								that.Send(buff)
							}
						}
					}
				})
			},

			// 打印机结束
			// 获取当前位置信息
			getlocation() {
				let _this = this
				console.log("获取经纬度信息")
				uni.getLocation({
					type: 'gcj02',
					geocode: true, //设置该参数为true可直接获取经纬度及城市信息
					success: function(res) {
						_this.lat = res.latitude
						_this.lng = res.longitude
						_this.init()
					},
					fail(err) {
						console.log(err, "定位错误信息")
					}
				});
			},
			init() {
				let _this = this;
				httpRequest.request('/dhtapi/Procureorder/detail', 'POST', {
					id: this.listid,
					lat: this.lat,
					lng: this.lng
				}, false, false, true).then(res => {
					this.dataAll = res.data
					this.pageShow = true
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 打开地图
			openmap() {
				uni.openLocation({
					latitude: Number(this.dataAll.supplier.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(this.dataAll.supplier.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: this.dataAll.supplier.address, //即将传到高德或腾讯地图的店铺名称
					address: this.dataAll.supplier.address, //即将传到高德或腾讯地图的详细地址
				})
			},
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			},
			startPrint(qxpdid) {
				if (!httpRequest.qxpd(qxpdid, this.$store.state.userInfo.ability_rule_ids)) {
					return false
				}
				let that = this
				uni.showActionSheet({
					itemList: ['云打印机', '蓝牙打印机'],
					success: function(res) {
						// 选择云打印机走0
						if (res.tapIndex == 0) {
							that.modal.title = "请再次确认打印！"
							that.modalSure()
						}
						// 选择蓝牙打印机走1
						if (res.tapIndex == 1) {
							that.receiptTest()
						}
					},
					fail: function(res) {}
				});
			},
			modalSure() {
				this.modal.modalShow = false
				if (this.modal.title == "请再次确认打印！") {
					uni.showLoading({
						mask: true,
						title: "发送数据中"
					})
					httpRequest.request("/dhtapi/Procureorder/dyProcureOrderDetail", 'GET', {
						id: this.listid,
					}, false, false, true).then(res => {
						uni.hideLoading()
						httpRequest.toast(res.msg)
					}).catch(err => {
						httpRequest.toast(err.msg);
					})
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.headerbottom {
		font-size: 28rpx;
		font-weight: bold;
	}

	.headerright {
		text-align: right;
	}

	.margin_topx {
		margin-top: 10rpx;
	}

	.huisetext {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #999999;
	}

	.lansetext {
		font-size: 24rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #999999;
	}

	.dizhiimg {
		width: 24rpx;
		height: 24rpx;
		margin-left: 12rpx;
		// margin-top: 14rpx;
		background-size: 100% 100%;
		background-image: url('@/static/image/system/wyqlittlephone.png');
	}

	.content {
		padding-top: 30rpx;
	}

	.contentchild {
		font-size: 26rpx;
	}

	.content_child {
		margin: 20rpx 0;
	}

	.headerchild {
		font-size: 32rpx;
		font-weight: bold;
	}

	.headercenter {
		text-align: center;
	}

	.dingdan {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #666666;
	}

	.heji {
		font-size: 28rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.shanpin {
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid rgba(153, 153, 153, 0.05);
	}

	.erbaxs {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.flex2 {
		flex: 2;
	}

	.flex1 {
		flex: 1.5;
		text-align: right;
	}

	.biankuang {
		margin-top: 10rpx;
	}

	.juli {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.dizhi {
		font-size: 24rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #737373;
	}

	.daifahuo {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #F3AD3D;
	}

	.jujue {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #ff0000;
	}

	.yisongda {
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #0BBDCB;
	}

	.bigtext {
		font-size: 32rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: bold;
		color: #000000;
	}

	.normaltxt {
		font-weight: 500;
	}

	.beizhu {
		color: #0BBDCB;
	}

	.xiankuan {
		width: 300rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
</style>